<template>
  <template v-if="item.type === '输入'">
    <view
      class="item"
      :class="[item.exc && item.exc.direction === 'row' ? 'aInput-row' : 'aInput']"
      :id="item.id"
    >
      <view class="title">
        <view class="no">
          <text style="color: #00d1b6">{{ i + start + 1 }}</text
          >/{{ max }}
        </view>
        <view class="text">
          <view class="text_name">
            {{ item.name }}
          </view>
          <view v-if="item.validate">
            <view class="error">{{ item.validate_message }}</view>
          </view>
        </view>
      </view>
      <view class="content">
        <view class="input-box">
          <input
            class="input"
            :value="item.value"
            @input="onInput($event, item)"
            :disabled="disabled"
            :type="item.inputMode || 'text'"
            placeholder="请输入"
          />
          <text class="unit" v-if="item.exc && item.exc.unit">{{ item.exc.unit }}</text>
        </view>
      </view>
    </view>
  </template>
  <template v-else-if="item.type.includes('单选')">
    <view class="item aSelect" :id="item.id">
      <view class="title">
        <view class="no">
          <text style="color: #00d1b6">{{ i + start + 1 }}</text
          >/{{ max }}
        </view>
        <view class="text">
          <view class="text_name">
            {{ item.name }}
          </view>
          <view v-if="item.validate">
            <view class="error">{{ item.validate_message }}</view>
          </view>
        </view>
      </view>
      <view class="options">
        <my-option
          v-for="(option, i) in item.options"
          :key="i"
          :cWidth="cWidth"
          :tWidth="tWidth"
          :text="option.label"
          :active="item.value === option.value"
          :pScale="item.scale"
          @select="onSelect(item, i, 1)"
          @scale="onScale($event, item, i)"
        >
          <input
            class="other"
            v-if="option.input"
            v-model="item.inputText"
            :disabled="disabled"
            :maxlength="item.maxlength || 50"
            type="text"
          />
        </my-option>
      </view>
    </view>
  </template>
  <template v-else-if="item.type.includes('多选')">
    <view class="item aSelect" :id="item.id">
      <view class="title">
        <view class="no">
          <text style="color: #00d1b6">{{ i + start + 1 }}</text
          >/{{ max }}
        </view>
        <view class="text">
          <text class="text_name">
            {{ item.name }}
            <text class="mark">多选</text>
          </text>
          <view v-if="item.validate">
            <view class="error">{{ item.validate_message }}</view>
          </view>
        </view>
      </view>
      <view class="options">
        <my-option
          v-for="(option, i) in item.options"
          :key="i"
          :cWidth="cWidth"
          :tWidth="tWidth"
          :text="option.label"
          :active="item.value.includes(option.value)"
          :pScale="item.scale"
          @select="onSelect(item, i, 2)"
          @scale="onScale($event, item, i)"
        >
          <input
            class="other"
            v-if="option.input"
            v-model="item.inputText"
            :disabled="disabled"
            :maxlength="option.maxlength || 50"
            type="text"
          />
        </my-option>
      </view>
    </view>
  </template>
  <template v-else-if="item.type === '搜索输入'">
    <view class="item aSearch" :id="item.id">
      <view class="title">
        <view class="no">
          <text style="color: #00d1b6">{{ i + start + 1 }}</text
          >/{{ max }}
        </view>
        <view class="text">
          <view class="text_name">
            {{ item.name }}
            <text class="mark">多选</text>
          </view>
          <view v-if="item.validate">
            <view class="error">{{ item.validate_message }}</view>
          </view>
        </view>
      </view>
      <view class="content">
        <view class="box">
          <view class="search">
            <up-icon name="search" color="#222" size="28" />
            <view class="input" @tap="goSearch(item)">
              <text class="placeholder">去搜索</text>
            </view>
          </view>
        </view>
        <view class="groups" v-if="item.extContent && item.extContent.length">
          <view class="group" v-for="(t, i) in item.extContent" :ke="i">
            {{ t.ingredientsName }}
            <view class="close" v-if="!disabled" @tap.stop="del(item, i)">
              <up-icon name="close" size="16" color="#00D1B6"></up-icon>
            </view>
          </view>
        </view>
      </view>
    </view>
  </template>
  <template v-else-if="item.type === '日期选择'">
    <view class="item aInput" :id="item.id">
      <view class="title">
        <view class="no">
          <text style="color: #00d1b6">{{ i + start + 1 }}</text
          >/{{ max }}
        </view>
        <view class="text">
          <view class="text_name">
            {{ item.name }}
          </view>
          <view v-if="item.validate">
            <view class="error">{{ item.validate_message }}</view>
          </view>
        </view>
      </view>
      <view class="content">
        <picker
          class="picker"
          mode="date"
          :value="item.value"
          :start="
            item.config && item.config.start_type === 'today'
              ? parseTime(new Date(), '{y}-{m}-{d}')
              : item.config.start
          "
          :end="
            item.config && item.config.end_type === 'today'
              ? parseTime(new Date(), '{y}-{m}-{d}')
              : item.config.end
          "
          @change="onDateChange($event, item)"
          :disabled="disabled"
        >
          <view v-if="item.value" class="input">{{ item.value }}</view>
          <view v-else class="input disabled">请选择日期</view>
        </picker>
      </view>
    </view>
  </template>
  <template v-else-if="item.type === '时间选择'">
    <view class="item aInput" :id="item.id">
      <view class="title">
        <view class="no">
          <text style="color: #00d1b6">{{ i + start + 1 }}</text
          >/{{ max }}
        </view>
        <view class="text">
          <view class="text_name">
            {{ item.name }}
          </view>
          <view v-if="item.validate">
            <view class="error">{{ item.validate_message }}</view>
          </view>
        </view>
      </view>
      <view class="content">
        <picker
          class="picker"
          mode="time"
          :value="item.value"
          @change="onTimeChange($event, item)"
          :disabled="disabled"
        >
          <view v-if="item.value" class="input">{{ item.value }}</view>
          <view v-else class="input disabled">请选择时间</view>
        </picker>
      </view>
    </view>
  </template>
  <template v-else-if="item.type === '数字选择'">
    <view class="item aInput" :id="item.id">
      <view class="title">
        <view class="no">
          <text style="color: #00d1b6">{{ i + start + 1 }}</text
          >/{{ max }}
        </view>
        <view class="text">
          <view class="text_name">
            {{ item.name }}
          </view>
          <view v-if="item.validate">
            <view class="error">{{ item.validate_message }}</view>
          </view>
        </view>
      </view>
      <view class="content">
        <view class="tags">
          <view
            class="tag"
            :class="{ active: item.value === parseFloat(item.config.min) + tag - 1 + '' }"
            v-for="tag in item.config.max - item.config.min"
            :key="tag"
            @tap="tagClick(parseFloat(item.config.min) + tag - 1 + '', item)"
          >
            {{ parseFloat(item.config.min) + tag - 1 }}
          </view>
          <view class="start">{{ item.config.min_label }}</view>
          <view class="end">{{ item.config.max_label }}</view>
        </view>
      </view>
    </view>
  </template>
  <template v-else-if="item.type === '图片上传'">
    <view class="item aUpload">
      <view class="title">
        <view class="no">
          <text style="color: #00d1b6">{{ i + start + 1 }}</text
          >/{{ max }}
        </view>
        <view class="text">
          <view class="text_name">
            {{ item.name }}
          </view>
          <view v-if="item.validate">
            <view class="error">{{ item.validate_message }}</view>
          </view>
        </view>
      </view>
      <view class="subTitle" v-if="item.subTitle">
        {{ item.subTitle }}
      </view>
      <view class="content">
        <view class="cell" v-for="(c, i) in item.value" :key="i">
          <img class="icon" :src="c" @tap="perview(c)" alt="" />
          <view class="close" @tap="onClose(item, i)">
            <up-icon name="close" size="16" color="#00D1B6"></up-icon>
          </view>
        </view>
        <view class="cell" v-if="item.value.length < item.config.max">
          <img class="icon" @tap="onUpload(item)" src="@/module/static/upload.png" alt="" />
        </view>
      </view>
    </view>
  </template>
</template>

<script lang="ts">
import myOption from './myOption.vue'
import { typeOf, parseTime, throttle } from '@/utils/tools'
import http from '@/utils/http'
import bus from '@/utils/bus'
export default {
  props: {
    disabled: {
      default: false
    },
    item: {
      required: true
    },
    i: {
      default: 0
    },
    start: {
      default: 0
    },
    max: {
      default: 0
    },
    cWidth: {
      required: true
    },
    tWidth: {
      required: true
    }
  },
  components: {
    myOption
  },
  data() {
    return {
      searchItem: null
    }
  },
  methods: {
    parseTime: parseTime,
    del(item, i) {
      item.extContent.splice(i, 1)
      item.value = item.extContent
        .map((v) => {
          return v.ingredientsName
        })
        .join('、')
    },
    goSearch: throttle(
      function (item) {
        if (this.disabled) {
          return
        }

        this.searchItem = item
        bus.on('onSearch', (e) => {
          console.log(e)
          if (item.extContent) {
            e.map((v) => {
              const f = item.extContent.find((u) => {
                return u.id === v.id
              })
              if (!f) {
                item.extContent.push(v)
              }
            })
          } else {
            item.extContent = [...e]
          }
          item.value = item.extContent
            .map((v) => {
              return v.ingredientsName
            })
            .join('、')
          console.log(item.value)
          bus.off('onSearch')
          this.$emit('change')
        })
        uni.navigateTo({
          url: `/module/src/pages/search/index?type=${item.config.type}&url=${item.config.url}`
        })
      },
      500,
      this
    ),
    onInput(e, item) {
      item.value = e.detail.value
      this.$emit('change')
    },
    onDateChange(e, item) {
      item.value = e.detail.value
      this.$emit('change')
    },
    onTimeChange(e, item) {
      item.value = e.detail.value
      this.$emit('change')
    },
    tagClick(e, item) {
      if (this.disabled) {
        return
      }

      item.value = e
      this.$emit('change')
    },
    onScale(e, item, i) {
      item.options[i].scale = e

      const f = item.options.find((v) => {
        return v.scale
      })
      if (f) {
        item.scale = true
      } else {
        item.scale = false
      }
    },
    onSelect(item, i, type) {
      if (this.disabled) {
        return
      }

      // type 1 单选 2 多选
      if (type === 1) {
        if (item.value === item.options[i].value) {
          item.value = ''
          item.sort = ''
        } else {
          item.value = item.options[i].value
          item.sort = item.options[i].sort
        }
      } else if (type === 2) {
        const m = item.value.findIndex((v) => {
          return v === item.options[i].value
        })
        if (m > -1) {
          item.value.splice(m, 1)
        } else {
          if (item.options[i].exclusive) {
            item.value = [item.options[i].value]
          } else {
            for (let j = item.value.length; j > -1; j--) {
              const k = item.options.find((v) => {
                return item.value[j] === v.value && v.exclusive
              })
              if (k) {
                item.value.splice(j, 1)
              }
            }
            item.value.push(item.options[i].value)
          }
        }
        this.setSort(item)
      }
      this.$emit('change')
    },
    onClose(item, i) {
      item.value.splice(i, 1)
    },
    perview(src) {
      uni.previewImage({
        urls: [src]
      })
    },
    onUpload(item) {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], //从相册选择
        success: function (chooseImageRes) {
          console.log(chooseImageRes)
          if (chooseImageRes.tempFiles[0].size > 1024 * 1024 * 20) {
            uni.showToast({
              title: '图片不能超过20MB',
              duration: 2000
            })
          } else {
            http
              .upload({
                url: '/api' + item.config.url,
                name: 'imgFile',
                file: chooseImageRes.tempFilePaths[0]
              })
              .then((res) => {
                console.log(res)
                item.value.push(res.data.url)
              })
          }
        }
      })
    },
    setSort(item) {
      const sort = []
      item.value.map((v) => {
        item.options.map((u) => {
          if (v === u.value) {
            sort.push(u.sort)
          }
        })
      })
      item.sort = sort
    }
  }
}
</script>
<style lang="scss" scoped>
.item {
  padding: 32rpx;
  width: 100%;
  .title {
    width: 100%;
    // padding: 0 32rpx;
    font-size: 32rpx;
    color: #222222;
    line-height: 52rpx;
    display: flex;
    align-items: flex-start;
    word-break: break-all;
    .no {
      margin-top: 8rpx;
      flex: 0 0 auto;
      height: 34rpx;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #686868;
      line-height: 34rpx;
      margin-right: 8rpx;
      white-space: nowrap;
    }
    .text {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      .text_name {
        font-weight: 700;
        font-size: 32rpx;
        color: #222222;
        line-height: 52rpx;
      }
    }
    .error {
      margin-top: 8rpx;
      display: inline-block;
      background: #ff503d;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      padding: 4rpx 16rpx 2rpx 16rpx;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      line-height: 34rpx;
      word-break: break-all;
    }
    .mark {
      margin: 6rpx 0 6rpx 8rpx;
      display: inline-block;
      width: 80rpx;
      height: 40rpx;
      background: #5c8eff;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #ffffff;
      text-align: center;
      line-height: 40rpx;
    }
  }
  .subTitle {
    margin-top: 8rpx;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 30rpx;
    color: #1e0e00;
    line-height: 40rpx;
    word-break: break-all;
    white-space: pre-line;
  }
}
.aInput {
  .content {
    width: 100%;
    // padding: 0 32rpx;
    .input-box {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
    }
    .input {
      width: 100%;
      height: 108rpx;
      font-size: 32rpx;
      color: #222222;
      line-height: 100rpx;
      border-bottom: 2rpx solid #e5e6eb;
    }
    .unit {
      font-size: 30rpx;
      line-height: 100rpx;
      font-weight: 400;
      color: #222222;
    }
  }
}
.aSelect {
  .options {
    width: 100%;
    margin-top: 32rpx;
    // padding: 0 32rpx;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20rpx;
    box-sizing: border-box;
  }
}
.aSearch {
  .content {
    margin-top: 24rpx;
    width: 100%;
    // padding: 0 32rpx;
    .box {
      width: 100%;
      height: 84rpx;
      position: relative;
    }
    .search {
      width: 100%;
      height: 84rpx;
      padding: 0 24rpx;
      background: #ffffff;
      border-radius: 42rpx;
      border: 2rpx solid #000000;
      display: flex;
      align-items: center;
      .input {
        overflow-x: auto;
        width: 100%;
        height: 84rpx;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        line-height: 84rpx;
        color: #222222;
      }
    }
    .groups {
      margin-top: 24rpx;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 32rpx 24rpx;
      .group {
        background: #e5faf8;
        color: #00d1b6;
        font-size: 28rpx;
        line-height: 40rpx;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        padding: 12rpx 16rpx;
        height: 64rpx;
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
      }
      .close {
        margin-left: 8rpx;
      }
    }
    .placeholder {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 30rpx;
      line-height: 42rpx;
      color: #999999;
    }
    .mask {
      z-index: 10;
      height: 84rpx;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
.aInput-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 32rpx;
  .title {
    .no {
      margin-top: 20rpx;
    }
    .text {
      padding: 12rpx 0;
      .text_name {
        font-size: 30rpx;
        line-height: 48rpx;
      }
    }
  }
  .content {
    width: 100%;
    .input-box {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .input {
      width: 100%;
      height: 72rpx;
      font-size: 30rpx;
      color: #222222;
      line-height: 72rpx;
      text-align: right;
    }
    .unit {
      margin-left: 24rpx;
      font-size: 30rpx;
      line-height: 72rpx;
      font-weight: 400;
      color: #222222;
    }
  }
}
.tags {
  margin-top: 24rpx;
  display: inline-flex;
  flex-direction: row;
  position: relative;
  padding-top: 46rpx;
  .tag {
    width: 57rpx;
    height: 72rpx;
    background: #fafafa;
    border: 1rpx solid #e5e6eb;
    font-weight: 400;
    font-size: 28rpx;
    color: #222222;
    line-height: 72rpx;
    text-align: center;
  }
  .active {
    background: rgba(0, 209, 182, 0.1);
    border: 1rpx solid #00d1b6;
    color: #00d1b6;
  }
  .start {
    position: absolute;
    left: 0;
    top: 0;
  }
  .end {
    position: absolute;
    right: 0;
    top: 0;
  }
  .start,
  .end {
    font-weight: 400;
    font-size: 24rpx;
    color: #222222;
    line-height: 38rpx;
  }
}
.aUpload {
  display: flex;
  flex-direction: column;
  .content {
    margin-top: 32rpx;
    display: flex;
    flex-direction: row;
    .cell,
    .icon {
      height: 240rpx;
      width: 240rpx;
    }
    .cell {
      position: relative;
      .close {
        height: 32rpx;
        width: 32rpx;
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(50%, -50%);
      }
    }
  }
}
.disabled {
  color: #909090 !important;
}
.other {
  margin-left: 6rpx;
  flex: 1 1 auto;
  border-bottom: 1rpx solid #000000;
  transform: translateZ(0);
}
</style>
